import { html, NE } from 'nvagir'

/**
 * 存储侧边栏项信息的数据结构
 *
 * @remarks
 * 由图标名称、项标题、对应的页面路径
 */
type SibeBarItemData = {
  iconfontName: string
  title: string
  path: string
}

/**
 * 用于生成一个侧边栏项的组件
 *
 * @remarks
 * 将在 SideBar 组件中引用
 *
 * @param item 用于传入侧边栏项所需数据
 * @returns 侧边栏项
 */
const SideBarItem = (item: SibeBarItemData) => {
  const clickHandler: EventListener = () => {
    if (item.path !== window.location.pathname) {
      history.nvagirRouter.push(item.path)
    }
  }

  const { el } = html`
    <li class="side-bar-item" n@click=${clickHandler}>
      <i class="iconfont-class ${item.iconfontName}"></i>
      ${item.title}
    </li>
  `

  // 添加活跃样式
  if (item.path === window.location.pathname) {
    el.dom.classList.add('active-side-bar-item')
  }

  // 子组件返回
  const result: NE<'SideBarItem'> = { name: 'SideBarItem', el }
  return result
}

/**
 * 用于生成一个侧边栏的组件
 *
 * @remarks
 * 将在 MainSideBar 组件中被使用
 *
 * @param items 用于传入多个侧边栏项所需数据
 * @returns 侧边栏
 */
const SideBar = (items: Array<SibeBarItemData>) => {
  const { el } = html`
    <ul class="side-bar">
      ${items.map(item =>
        SideBarItem({
          iconfontName: item.iconfontName,
          title: item.title,
          path: item.path,
        }),
      )}
    </ul>
  `

  const result: NE<'SideBar'> = { name: 'SideBar', el }
  return result
}

export default SideBar
